<?php if (!defined('THINK_PATH')) exit();?>﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Full Layout - jQuery EasyUI Demo</title>
        <link href="/Public/js/themes/default/easy_ui.css" rel="stylesheet" type="text/css" />
    <link href="/Public/js/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="/Public/css/demo.css" rel="stylesheet" type="text/css" />
    <script src="/Public/js/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="/Public/js/jquery.easyui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var pi = { "total": 3, "rows": [
	{ "userName": "FI-SW-01", "remarks": "Koi", "userGroup": "0" },
	{ "userName": "FI-SW-01", "remarks": "Koi", "userGroup": "1" },
	{ "userName": "FI-SW-01", "remarks": "Koi", "userGroup": "2" }
]
        };
        $(function () {
            GetUserAndUserGroupData();
        })
        var rowId;

        
        function loadData() {

            var params = { "userGroupId": '"' + userGroupId + '"', userName: '"' + $("#txtUserName").val() + '"' };
            //表格初始化
            $('#tbGrid').datagrid({
                title: '用户列表',
                iconCls: 'icon-save',
                width: '100%',
                data: UserInfo,
                height: 'auto',
                queryParams: params,
                nowrap: false,
                striped: true,
                remoteSort: false,
                columns: [[
                { field: 'userId', hidden: true },
                { field: 'groupName', hidden: true },
                { field: 'userName', title: '用户名', width: 300, align: 'left' },
                { field: 'groupId', title: '所属组', width: 300, align: 'left', resizable: true, editable: false, editor: { type: 'combobox', options: { onSelect: userGroupSelect, valueField: 'id', textField: 'text', data: GroupData} }
                }
                 ]],
                onClickCell: function (index, field, value) {
                    var row = $(this).datagrid('getSelected');
                    if (row != null) {
                        var i = $(this).datagrid('getRowIndex',row);
                        var ed = $(this).datagrid('getEditor', { index: i, field: 'groupId' });
                        ed.target.combobox("select", ed.target.combobox("getText"));
                        $(this).datagrid('endEdit', i);
                    }
                    $(this).datagrid('beginEdit', index);
                    rowId = index;
                    var ed = $(this).datagrid('getEditor', { index: index, field: 'groupId' });
                    $(ed.target).focus();
                }
            });
            //树形初始化
            $('#tt').tree({
                data: UserGroupTree,
                method: 'get',
                animate: true,
                onContextMenu: function (e, node) {
                    e.preventDefault();
                    $(this).tree('select', node.target);
                    $('#mm').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    });
                },
                onAfterEdit: function (node) {
                    userGroupEdit(node.text, node.id);
                },
                onClick: function (node) {
                     $("#txtUserName").val('');
                     
                    userGroupClick(node.id);
                }
            });
            //
          ReComboxValue();
           
        }

        function append() {
            var t = $('#tt');
            var node = t.tree('getSelected');
            t.tree('append', {
                parent: (node ? node.target : null),
                data: [{
                    text: 'new item',
                    id: ''
                }]
            });
        }
        function collapse() {
            var node = $('#tt').tree('getSelected');
            $('#tt').tree('collapse', node.target);
        }
        function expand() {
            var node = $('#tt').tree('getSelected');
            $('#tt').tree('expand', node.target);
        }

        var userGroupId = "";
        //表格数据加载
        function LoadDataGridData() {
           var params = { "groupId": userGroupId , "userName": $("#txtUserName").val() };
            $.ajax({
                url: "<?php echo U('UserGroup/GetUser');?>",
                type: "POST",
                data:params,
                cache: true,
                dataType: "json",
                success: function (data) {
                    UserInfo = data;
                    $('#tbGrid').datagrid("loadData", UserInfo);
                    ReComboxValue();
                }
            });

        }
        //重新加载Tree数据
        function LoadTreeData() {
            $('#tt').tree("reload");
        }
        //用户组选择
        function userGroupSelect() {
            var ed = $('#tbGrid').datagrid('getEditor', { index: rowId, field: 'groupId' });
            var userGroupId = ed.target.combobox("getValue");
            var row = $('#tbGrid').datagrid('getSelected');
            $.ajax({
                url: '<?php echo U('UserGroup/MoveUserToGroup');?>',
                type: "POST",
                cache: true,
                data: { userId: row.userId, groupId: userGroupId },
                success: function (data) {
                    if (data == 'y') {
                       // $('#tbGrid').datagrid('endEdit', rowId);
                       alert("用户组修改成功!");
                    }
                    else {
                        alert("用户组修改失败!");
                    }
                }
            });
        }
        //用户组编辑
        function userGroupEdit(groupName, groupId) {
            $.ajax({
                url: '<?php echo U('UserGroup/EditGroupName');?>',
                type: "POST",
                cache: true,
                data: { groupName: groupName, groupId: groupId },
                success: function (data) {
                    //LoadDataGridData();
                     if (groupId == "") {
                        GetUserAndUserGroupData();
                    }
                    else {
                        LoadDataGridData();
                    }
                }
            });
        }
        //用户组单击
        function userGroupClick(groupId) {
            userGroupId = groupId;
            LoadDataGridData();
        }
        var UserGroupTree = "";
        var UserInfo = "";
        var GroupData = "";
        function GetUserAndUserGroupData() {
            $.ajax({
                url: '<?php echo U('UserGroup/GetUserGroupAll');?>',
                type: "POST",
                cache: true,
                dataType: "json",
                success: function (data) {
                    UserGroupTree =data;
                    GroupData = UserGroupTree[0].children;
                    $.ajax({
                        url: "<?php echo U('UserGroup/GetUser');?>",
                        type: "POST",
                        cache: true,
                        dataType: "json",
                        success: function (data) {
                            UserInfo = data;
                            loadData();
                        }
                    });

                }
            });
        }
         function ReComboxValue() {
            var rows = $("#tbGrid").datagrid('getRows');
            for (var i = 0; i < rows.length; i++) {
                $('#tbGrid').datagrid('beginEdit', i);
                var ed = $('#tbGrid').datagrid('getEditor', { index: i, field: 'groupId' });
                ed.target.combobox("select", rows[i].groupName);
                $('#tbGrid').datagrid('endEdit', i);
            }
        }
         function editTree() {
            var node = $('#tt').tree('getSelected');
            $('#tt').tree('beginEdit', node.target);
        }
    </script>
</head>
<body class="easyui-layout">
    <!--左边-->
    <div data-options="region:'west',split:true,title:'用户组'" style="width: 150px; padding: 10px;">
        <ul id="tt" class="easyui-tree">
        </ul>
         <div id="mm" class="easyui-menu" style="width: 120px;">
            <div onclick="append()" data-options="iconCls:'icon-add'">
                添加</div>
            <div onclick="editTree()" data-options="iconCls:'icon-add'">
                编辑</div>
            <div class="menu-sep">
            </div>
            <div onclick="expand()">
                展开</div>
            <div onclick="collapse()">
                收缩</div>
        </div>
    </div>
    <!--右边-->
    <div data-options="region:'center',title:''">
        <div id="toolbar" style="padding: 5px; height: auto">
            <div>
                用户名:
                <input type="text" name="txtUserName" id="txtUserName" value="" />
                <a href="#" class="easyui-linkbutton" iconcls="icon-search" onclick="LoadDataGridData()">查询</a>
                
            </div>
        </div>
        <table class="easyui-datagrid" id="tbGrid" toolbar="#toolbar" singleselect="true">
        </table>
    </div>
</body>
</html>